<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
        //var baseUrl = '../EZOPSDashboardUI';
            $(document).ready(function () {
                /**
                 * To handle left menu toggle on page load
                 */
            	$('#operation_li').addClass('root-level has-sub opened');
            	$('#operation_li_ul').toggle('click').addClass('visible');
            	$('#operation_li_ul').attr('style','');
                $('#operation_li_ul_li_' + 2).attr('style','font-weight: bold;');
                
            	 /* $(document).ready(function() {
                     $('#operation_ul').toggle('click').addClass('visible');
                             $('#operation_ul_' + 2).addClass('active');
                             $('#operation_ul_' + 1).children('a>span').attr("style","font-weight: bold;");
            	 }); */
                var statusMap = $.ajax({
    	    		'async': false,
    	    		'global': false,
    	    		'url': ezopsContextPath+"/filemonitor/getTradeStatus",
    	    		'datatype': "json",
    	    		'success': function(data){
        	    		console.log("Trade Status -"+ko.toJSON(data));
        	    		var noOfFailedTrade=data.failTradeCount;
        	    		var noOfFailedFile=data.failFailCount;
    	    			$("#failedtrade").attr("data-end",noOfFailedTrade);
    	    			$("#failedfile").attr("data-end",noOfFailedFile);
    	    			$("#failedtrade").val(noOfFailedTrade);
    	    			$("#failedfile").val(noOfFailedFile);
    	    			
    	    		}            
    			});
    			
                // prepare the data
                var source =
                {
                    dataType: "json",
                    dataFields: [
                         { name: 'client', type: 'string' },
                         { name: 'batchId', type: 'string' },
                         { name: 'source', type: 'string' },                         
                         { name: 'type', type: 'string' },
                         { name: 'datetime', type: 'string' },
                         { name: 'status', type: 'string' },
                         { name: 'manager', type: 'string' },
                         { name: 'total', type: 'string' },
                         { name: 'processed', type: 'string' },
                         { name: 'pending', type: 'string' },
                         { name: 'ignore', type: 'string' },
                         { name: 'action', type: 'string' }
                    ], 
                    url:  ezopsContextPath+'/filemonitor/getfiledata'
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function () {
                        // data is loaded.
                    }
                });
            
                // create jqxDataTable.
                $("#dataTable").jqxGrid(
                {
                    source: source,
                    width: '99%',
                    pageable:false,
                    autorowheight: true,
                    autoheight: true,
                    filterable: true,
                    selectionmode: 'checkbox',
                    altRows: true,
                    groupable: true,
                    columnsresize: true,
                    columnsreorder: true,
                    sortable: true,
            
                    columns: [ 
                      { text: 'Client', cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center', dataField: 'client',/* pinned: true,*/  width: '8%' },
                      { text: 'Batch id', cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center', dataField: 'batchId', width: '7%' },
                      { text: 'Destination',columngroup: 'ProductDetails', dataField: 'source', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: '14%' },
                      { text: 'Type', dataField: 'type',columngroup: 'ProductDetails', cellsformat: 'c2', align: 'center', cellsAlign: 'center', minWidth: 120 },
                      { text: 'Date & Time', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'datetime',  width: '10%' },
                      { text: 'Status', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'status', width: '59px' },
                      { text: 'Portfolio', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'manager', width: '130px' },
                      { text: 'Total', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'total', filterable: false, sortable: false,groupable: false,  width: '5%' },
                      { text: 'Processed', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'processed', filterable: false, sortable: false,groupable: false,   width: '8%' },
                      { text: 'Pending', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'pending', filterable: false, sortable: false,groupable: false,  width: '6%' },
                      { text: 'Ignore', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'ignore', filterable: false, sortable: false,groupable: false,  width: '5%' }
                      
                    ]/*,
                    columnGroups: 
                    [
                      { text: 'Inbound', align: 'left', name: 'ProductDetails' }
                    ]*/
                });
                $("#excelExportinbond").click(function () {
                    $("#dataTable").jqxGrid('exportdata', 'xls', 'jqxGrid');           
                });
                $("#xmlExportinbond").click(function () {
                    $("#dataTable").jqxGrid('exportdata', 'xml', 'jqxGrid');
                });
                $("#csvExportinbond").click(function () {
                    $("#dataTable").jqxGrid('exportdata', 'csv', 'jqxGrid');
                });  
            
                
            });
            $(document).ready(function () {
                 // prepare the data
                var source1 =
                {
                    dataType: "csv",
                    dataFields: [
                          { name: 'client', type: 'string' },
                         { name: 'batchId', type: 'string' },
                         { name: 'source', type: 'string' },                         
                         { name: 'type', type: 'string' },
                         { name: 'datetime', type: 'string' },
                         { name: 'Status', type: 'string' },
                         { name: 'manager', type: 'string' },
                         { name: 'Total', type: 'string' },
                         { name: 'Processed', type: 'string' },
                         { name: 'Pending', type: 'string' },
                         { name: 'Ignore', type: 'string' }
                       
                    ], 
                    url: 'assets/sampledata/FileMonitorOutbond1.csv',
                    root: 'DATA',
                    record: 'ROW'
                };
                var dataAdapter = new $.jqx.dataAdapter(source1, {
                    loadComplete: function () {
                        // data is loaded.
                    }
                });
            
                $("#dataTable2").jqxGrid(
                {
                    source: dataAdapter,
                    width: '99%',
                    autorowheight: true,
                    autoheight: true,
                    pageable:false,
                    filterable: true,
                    selectionmode: 'multiplecellsextended',
                    altRows: true,
                    groupable: true,
                    columnsresize: true,
                    columnsreorder: true,
                    sortable: true,
            
                    columns: [ 
                      { text: 'Client', cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center', dataField: 'client',/* pinned: true,*/  width: '8%' },
                      { text: 'Batch id', cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center', dataField: 'batchId', width: '7%' },
                      { text: 'Source / Destination',columngroup: 'ProductDetails', dataField: 'source', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: '14%' },
                      { text: 'Type', dataField: 'type',columngroup: 'ProductDetails', cellsformat: 'c2', align: 'center', cellsAlign: 'center', minWidth: 120 },
                      { text: 'Date & Time', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'datetime',  width: '10%' },
                      { text: 'Status', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'Status', width: '59px' },
                      { text: 'Manager/ Portfolio', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'manager', width: '130px' },
                      { text: 'Total', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'Total', filterable: false, sortable: false,groupable: false,  width: '5%' },
                      { text: 'Processed', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'Processed', filterable: false, sortable: false,groupable: false,   width: '8%' },
                      { text: 'Pending', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'Pending', filterable: false, sortable: false,groupable: false,  width: '6%' },
                      { text: 'Ignore', cellsAlign: 'center', columngroup: 'ProductDetails', align: 'center', dataField: 'Ignore', filterable: false, sortable: false,groupable: false,  width: '5%' }
                    
                    ]/*,
                    columnGroups: 
                    [
                      { text: 'Outbound', align: 'left', name: 'ProductDetails' }
                    ]*/
                });
                $("#excelExportoutbond").click(function () {
                    $("#dataTable2").jqxGrid('exportdata', 'xls', 'jqxGrid');           
                });
                $("#xmlExportoutbond").click(function () {
                    $("#dataTable2").jqxGrid('exportdata', 'xml', 'jqxGrid');
                });
                $("#csvExportoutbond").click(function () {
                    $("#dataTable2").jqxGrid('exportdata', 'csv', 'jqxGrid');
                });   
            });
        </script>

<div class="row">
	<div class="col-md-12">
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default ">
					<div class="panel-heading">
						<div class="panel-title">
							<strong>Statistics</strong>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /.row -->
		<div class="row pull-bottom">
			<div class="static-col col-md-3 static-col col-md-offset-3">
				<div class="tile-stats tile-red">
					<div class="row">
						<div class="col-xs-4">
							<p id="failedtrade" class="num" data-start="0" data-end="0"
								data-postfix="" data-duration="1500" data-delay="0">0</p>
						</div>
						<div class="col-xs-8">
							<p class="announcement-text">Trades Failed</p>
						</div>
					</div>

					<div class="icon">
						<i class="entypo-database"></i>
					</div>
				</div>
			</div>
			<div class="static-col col-md-3">
				<div class="tile-stats tile-blue">
					<div class="row">
						<div class="col-xs-4">
							<p id="failedfile" class="num" data-start="0" data-end="0"
								data-postfix="" data-duration="1500" data-delay="0">0</p>
						</div>
						<div class="col-xs-8">
							<p class="announcement-text">Files Failed</p>
						</div>
					</div>
					<div class="icon">
						<i class="entypo-folder"></i>
					</div>

				</div>
			</div>
		</div>
		<!-- /.Manage your Asseccment Start -->
		<div class="row">
			<div class="col-lg-12">
				<!--   file status table Section Start -->
				<div class="panel panel-default">
					<div class="panel-heading">
						<div class="panel-title">
							<strong> File Monitor</strong>
						</div>
					</div>
					<!-- /.panel-heading -->
					<div class="panel-body">

						<h4>
							<strong class="h4_strong">Inbound</strong>
							<div class="importicon-panel" style='margin: 0 1% 10px 10px;'>
								<label>Import</label> <a
									class="btn btn-orange btn-sm btn-icon icon-left" href="#"
									id='csvImport' data-target="#uploadCSVModal"
									data-toggle="modal"><i class="fa fa-file-text"></i>
									CSV
								</a>
							</div>

							<div class="importicon-panel" style='margin: 0 1% 10px 10px;'>
								<label>Action</label> <a class='btn btn-xs btn-info' href="#"
									id='csvImport' data-target="#notificationModal"
									data-toggle="modal" data-original-title='Notify'> <i
									class='entypo-publish'></i>
								</a> <a class='btn btn-xs btn-info table_icon_btn' href="#"
									id='csvImport' data-target="#notificationModal"
									data-toggle="tooltip" title='Reload Files'
									data-original-title='Reload Files'> <i
									class='entypo-arrows-ccw'> </i>
								</a> <a class='btn btn-xs btn-info table_icon_btn' href="#"
									id='csvImport' data-target="#notificationModal"
									data-toggle="tooltip" title='Resend Files'
									data-original-title='Reload Files'> <i class='entypo-reply'></i>
								</a>
							</div>
						</h4>

						<div id="dataTable" style='clear: both;'></div>

						<h4>
							<strong class="h4_strong">Outbound</strong>
						</h4>
						<div id="dataTable2" style='clear: both;'></div>
						<!-- /.table-responsive -->
					</div>
					<!-- /.panel-body -->
				</div>
			</div>
			<!-- /.col-lg-12 -->
		</div>
		<!-- /#page-wrapper -->
	</div>
</div>
<!-- Modal Client -->